<template>
  <NavBar showBack floating title="订单详情"></NavBar>
  <PaySwiper :swiperList="orderInfo?.car_model_images || []"></PaySwiper>
  <view class="detail-page">
    <view class="detail-step">
      <view class="step-item">
        <image class="step-icon" :src="getImageSrc('static/icons/icon-down.png')"></image>
        <view>确认配置</view>
      </view>
      <view class="line"></view>
      <view class="step-item">
        <image class="step-icon" :src="getImageSrc('static/icons/icon-down.png')"></image>
        <view>确认个人信息</view>
      </view>
      <view class="line"></view>
      <view class="step-item">
        <image class="step-icon" :src="getImageSrc('static/icons/icon-down.png')"></image>
        <view>定金支付</view>
      </view>
    </view>

    <Title icon="title-icon1" title="订单填写"></Title>
    <view class="car-info">
      <image class="car-img" :src="orderInfo?.car_images ? orderInfo.car_images[0] : ''"></image>
      <view class="info-right">
        <view class="tit two-ellipsis">{{ orderInfo?.brand_name }}{{ orderInfo?.car_title }}</view>
        <view class="addr">
          <text>售价</text>
          <text class="price">{{ getPrice(orderInfo?.residual_amount) }}</text>
          <text>万起</text>
        </view>
      </view>
    </view>
    <view class="sub-cell">
      <view class="left">姓名</view>
      <input class="right t-right f-w" placeholder-style="font-weight: 400;" disabled v-model="orderInfo.real_name"
        placeholder="请输入您的姓名" />
    </view>
    <view class="sub-cell">
      <view class="left">电话</view>
      <input class="right t-right f-w" placeholder-style="font-weight: 400;" disabled v-model="orderInfo.mobile"
        placeholder="请输入您的电话" type="number"/>
    </view>
    <view class="sub-cell">
      <view class="left">门店</view>
      <input class="right t-right f-w" placeholder-style="font-weight: 400;" v-model="orderInfo.shop_name" disabled
        placeholder="请选择附近的门店" />
    </view>
    <view class="sub-cell">
      <view class="left">预约时间</view>
      <input class="right t-right f-w" placeholder-style="font-weight: 400;" v-model="orderInfo.appointtime" disabled
        placeholder="请选择预约时间" />
    </view>
    <view class="sub-cell">
      <view class="left">订单金额</view>
      <view class="right">
        <text class="uit">￥</text>
        <text class="price">{{ orderInfo?.pay_deposit }}</text>
        <!-- <text class="uit">万</text> -->
      </view>
    </view>
    <view class="sub-cell">
      <view class="left">支付状态</view>
      <view class="right">
        <!-- "deposit_status": 0,定金支付状态0未支付1已支付 <number> -->
        <!-- 支付状态0未支付1已支付2部分支付3已退款 -->
        <text class="right t-right f-w" v-if="orderInfo?.deposit_status == 0">定金未支付</text>
        <text class="right t-right f-w" v-else>
          {{ payStatus[orderInfo?.pay_status] || "" }}
        </text>
        <!-- <text class="uit">万</text> -->
      </view>
    </view>
  </view>
  <view class="bottom-btn">
    <view class="btn" @click="onDaohang">一键导航</view>
  </view>
</template>


<script setup>
import { onMounted, ref, watch } from "vue"
import NavBar from "@/components/ui/nav-bar"
import Title from "@/components/ui/title"
import service from "@/path/service"
import { router } from "@/path/router";
import PaySwiper from "../order-pay/swiper/index.vue"
import { getImageSrc } from '@/path/until';
const payStatus = {
  0: "定金已支付",
  1: "已支付",
  2: "部分支付",
  3: "已退款",
}
const orderInfo = ref({})
onMounted(() => {
  const routerData = router.getData()
  if (!routerData?.id) return
  service.get("api/ycg/usercenter/orderinfo", {
    order_id: routerData.id
  }).then((res) => {
    orderInfo.value = res
  })
})

function onDaohang() {
  uni.openLocation({
    latitude: orderInfo.value.shop_lat,
    longitude: orderInfo.value.shop_lng,
    name: orderInfo.value.shop_name,
    address: orderInfo.value.shop_address,
  })
}
function getPrice(num = 0) {
  return (num / 10000).toFixed(2) * 1
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>

